<template>
	<view class="self-inspection">
		<view>
			<view class="filter-item-blod" @click="showIndexList">
				{{projectName}}
				<u-icon name="arrow-down" size="14"></u-icon>
			</view>
		</view>
		<u-gap height="1" bgColor="#eee"></u-gap>
		<view class="list-filter">
			<view :class="queryParam.startTime == '' ? 'filter-item' : 'filter-item filter-item-blue'"
				@click="showADaterange = true">
				{{ queryParam.startTime == '' ? '不限时间' : selfDate}}
				<u-icon v-if="showADaterange" name="arrow-up" size="12"></u-icon>
				<u-icon v-else name="arrow-down" size="12"></u-icon>
			</view>
			<view :class="queryParam.reportAreaName == '' ? 'filter-item' : 'filter-item filter-item-blue'"
				@click="showStatus = true">
				{{ queryParam.status === '' ? '全部状态' : statusName }}
				<u-icon v-if="showStatus" name="arrow-up" size="12"></u-icon>
				<u-icon v-else name="arrow-down" size="12"></u-icon>
			</view>
		</view>
		<view class="list-wrap">
			<view class="my-list">
				<view class="my-list-item" v-for="(item, index) in listPatrol" :key="item.id">
					<view class="fix-btn">
						<view style="background-color: #f56c6c;" v-if="item.status ==='0'">未整改</view>
						<view style="background-color: #5ac725;" v-if="item.status ==='1'">已整改</view>
						<view style="background-color: #f56c6c;" v-if="item.status ==='2'">超期未整改</view>
						<view style="background-color: #5ac725;" v-if="item.status ==='3'">超期已整改</view>
					</view>
					<navigator :url="`/packageD/detail/detail?id=${item.id}`">
						<view class="list-item-title">
							<view>
								<text class="title-tit">检查人员：</text>
								<text class="title-txt">{{ item.checkPersonName }}</text>
							</view>
							<view>
								<text class="title-tit">检查类型：</text>
								<text v-if="item.type == 0" class="title-txt txt-b">日常巡检</text>
								<text v-if="item.type == 1" class="title-txt txt-w">专项检查</text>
							</view>
							<view>
								<text class="title-tit">项目名称：</text>
								<text class="title-txt">{{ item.projectName }}</text>
							</view>
							<view>
								<text class="title-tit">检查时间：</text>
								<text class="title-txt">{{ item.checkTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view>
								<text class="title-tit">所属区域：</text>
								<text class="title-txt">{{ item.areaName }}</text>
							</view>
							<view>
								<text class="title-tit">整改要求：</text>
								<text class="title-txt txt-r" v-if="item.rectifyDemand">{{ item.rectifyDemand }}</text>
							</view>
							<view>
								<text class="title-tit">整改期限：</text>
								<text class="title-txt txt-r"
									v-if="item.rectifyTime">{{ item.rectifyTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view v-if="item.status ==='1' || item.status ==='3'">
								<text class="title-tit">整改时间：</text>
								<text class="title-txt txt-r"
									v-if="item.rectifySuccTime">{{ item.rectifySuccTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view>
								<text class="title-tit">交办人：</text>
								<text class="title-txt"
									v-if="item.overseePersonName">{{ item.overseePersonName }}</text>
							</view>
							<view>
								<text class="title-tit">执行人：</text>
								<text class="title-txt"
									v-if="item.executePersonName">{{ item.executePersonName }}</text>
							</view>
							<view v-if="item.status ==='1' || item.status ==='3'">
								<text class="title-tit">整改回复：</text>
								<text class="title-txt">{{ item.rectifyResult }}</text>
							</view>
							<view v-if="item.status === '2'">
								<text class="title-tit">逾期时间：</text>
								<text class="title-txt txt-r">{{ filterTime(item.rectifyTime) }}</text>
							</view>
							<view v-if="queryParam.type == 1">
								<text class="title-tit">备注：</text>
								<text class="title-txt" v-if="item.remark">{{ item.remark }}</text>
								<text class="title-txt" v-else>无</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<u-button type="primary" size="large" text="新增整改记录" @click="toAdd"></u-button>
		</view>
		<u-picker closeOnClickOverlay :show="showStatus" :columns="statusOpts" @cancel="onStatusCancel"
			@confirm="onStatusConfirm" @close="onCloseStatus" keyName="title"></u-picker>
		<u-picker closeOnClickOverlay :show="showADaterange" :columns="timeOpts" @cancel="onDateCancel"
			@confirm="onDateConfirm" @close="onDateClose" keyName="title"></u-picker>
	</view>
</template>

<script>
	import { getProjectIndex } from '@/api/global'
	import { getPatrolList } from '@/api/list'
	import config from '@/utils/defaultConfig'
	import { _debounce,_throttle} from "@/utils/debounce.js"
	export default {
		data() {
			return {
				curNow: 0,
				indexShow: false,
				showProject: false,
				projectName: '全部项目',
				showDate: false,
				selfDate: '日期选择',
				showStatus: false,
				showADaterange: false,
				statusName: '',
				statusOpts: [
					['未整改','已整改','超期未整改','超期已整改','全部状态',]
				],
				timeOpts: [config.TimeRanges],
				total: '',
				newTime: Date.parse(new Date()), //时间戳
				listPatrol: [],
				queryParam: {
					pageNum: 1,
					pageSize: 10,
					projectName: '',
					status: '',
					isRectify: '1',
					startTime: '',
					endTime: '',
					reasonable: false
				},
			}
		},
		onLoad(option) {
			if (Object.keys(option).length != 0) {
				this.projectName = this.queryParam.projectName = option.projectName
			}
			this.getlist()
		},
		methods: {
			// 获取数据列表
			getlist() {
				getPatrolList(this.queryParam).then(res => {
					const list = res.data.rows.map(item=>{
						if (!item.rectifyDemand) {
							item.rectifyDemand = '无'
						}
						if (!item.overseePersonName) {
							item.overseePersonName = '无'
						}
						if (!item.executePersonName) {
							item.executePersonName = '无'
						}
						return item
					})
					this.listPatrol = this.listPatrol.concat(list)
					this.total = res.data.total
				})
			},
			// 滚动到底部触发事件
			onReachBottom() {
				if (this.queryParam.pageNum * this.queryParam.pageSize >= this.total) {
					uni.showLoading({
						title: '加载中'
					});
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 2000
					});
					uni.hideLoading()
				} else {
					if (this.queryParam.pageNum <= this.queryParam.pageNum - 1) {
						uni.showLoading({
							title: '加载中'
						});
						uni.hideLoading()
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.queryParam.pageNum++
						this.getlist()
						uni.hideLoading()
					}
				}
			},
			// 下拉刷新（不生效）
			onPullDownRefresh() {
				this.queryParam.pageNum = 1
				uni.stopPullDownRefresh()
			},
			// 点击全部项目
			showIndexList() {
				uni.navigateTo({
					url: '/packageB/selector/selector?from=' + 'engineering' + '&to=problem'
				})
			},
			onStatusConfirm(e) {
				if (e.indexs[0] === 5) {
					this.queryParam.status = ''
				} else {
					this.queryParam.status = e.indexs[0]
				} 
				this.statusName = e.value[0]
				this.showStatus = false
				this.listPatrol = []
				this.queryParam.pageNum = 1
				this.getlist()
			},
			editTitle() {
				if (this.queryParam.status === '') {
					uni.setNavigationBarTitle({
						title: '问题整改'
					})
				}
				if (this.queryParam.status === '0') {
					uni.setNavigationBarTitle({
						title: '问题整改-未整改'
					})
				}
				if (this.queryParam.status === '1') {
					uni.setNavigationBarTitle({
						title: '问题整改-已整改'
					})
				}
				if (this.queryParam.status === '2') {
					uni.setNavigationBarTitle({
						title: '问题整改-超期未整改'
					})
				}
				if (this.queryParam.status === '3') {
					uni.setNavigationBarTitle({
						title: '问题整改-超期已整改'
					})
				}
			},
			onCloseStatus() {
				this.showStatus = false
			},
			onStatusCancel() {
				this.showStatus = false
			},
			onDateClose() {
				this.showADaterange = false
			},
			onDateCancel() {
				this.showADaterange = false
			},
			// 时间范围判断
			getDateRange(dateNow, intervalDays) {
				let oneDayTime = 24 * 60 * 60 * 1000
				let list = []
				let lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime)
				list.push(this.formateDate(lastDay))
				list.push(this.formateDate(dateNow))
				return list
			},
			formateDate(time) {
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let day = time.getDate()
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				return year + '-' + month + '-' + day
			},
			onDateConfirm(e) {
				this.selfDate = e.value[0].title
				const dayTime = new Date()
				if (this.selfDate === '近三天') {
					const list = this.getDateRange(dayTime, 3)
					this.queryParam.startTime = list[0]
				} else if (this.selfDate === '近一周') {
					const list = this.getDateRange(dayTime, 7)
					this.queryParam.startTime = list[0]
				} else if (this.selfDate === '近一个月') {
					const list = this.getDateRange(dayTime, 30)
					this.queryParam.startTime = list[0]
				} else {
					this.queryParam.startTime = ''
				}
				this.showADaterange = false
				this.listPatrol = []
				this.queryParam.pageNum = 1
				this.getlist()
			},
			// 逾期
			filterTime(time) {
				const Time = time + ' 24:00:00'
				const Times = Date.parse(Time)
				const dtime = new Date().getTime()
				if (Times < dtime) {
					const s = dtime - Times
					const days = s / 1000 / 60 / 60 / 24;
					const daysRound = Math.floor(days);
					const hours = s / 1000 / 60 / 60 - 24 * daysRound;
					const hoursRound = Math.floor(hours);
					const minutes = s / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
					const minutesRound = Math.floor(minutes);
					const minutesCover = minutesRound > 10 ? minutesRound : `0${minutesRound}`
					const seconds = s / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound;
					let time = "";
					if (daysRound) {
						time = daysRound + "天" + hoursRound + "小时" + minutesRound + "分钟";
					} else if (!daysRound && hoursRound) {
						time = hoursRound + "小时" + minutesRound + "分钟";
					} else if (!daysRound && !hoursRound && minutesRound) {
						time = minutesRound + "分钟";
					} else if (!daysRound && !hoursRound && !minutesRound && seconds) {
						time = seconds + "秒";
					}
					return time
				}
			},
			toAdd() {
				uni.navigateTo({
					url: '/packageB/form/RectificationAdd'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.self-inspection {
		font-size: 28upx;
		height: 100vh;
		padding-bottom: 100upx;

		.list-filter {
			display: flex;
			flex-direction: row;
			text-align: center;
			padding: 0 15upx;
			background: #fff;

			.filter-item {
				font-size: 28upx;
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				justify-content: center;
				text-align: center;
			}
		}

		.filter-item-blod {
			font-size: 32upx;
			flex-grow: 1;
			padding: 20upx 0;
			display: flex;
			justify-content: center;
			text-align: center;
			font-weight: bold
		}

		.list-wrap {
			padding-bottom: 100upx;

			.list-item-title {
				line-height: 52upx;

				.title-tit {
					font-weight: bold;
				}

				.txt-b {
					color: $u-primary;
				}

				.txt-w {
					color: $u-warning;
				}

				.txt-r {
					color: $u-error;
				}
			}

			.list-content {
				padding: 15upx;

				text {
					word-wrap: break-word;
				}
			}

			.list-tags {
				white-space: nowrap;
				width: 100%;
				height: 60upx;

				// border-top: 1px solid $u-light-color;
				// padding:10upx;
				.tag-item {
					margin-right: 5upx;
				}
			}
		}

		.my-list {
			background-color: #eee;
			padding: 20upx;

			.my-list-item {
				position: relative;
				background: #fff;
				padding: 20upx;
				margin-bottom: 20upx;
				box-shadow: 0 2px 3px #ccc;
				border-radius: 8upx;

				.fix-btn {
					position: absolute;
					right: 20upx;
					bottom: 20upx;
					color: #fff;
					font-size: 22upx;
					view {
						border-radius: 5upx;
						padding: 4upx 10upx;
					}
				}

				.list-time {
					position: absolute;
					right: 20upx;
					top: 20upx;
					height: 40upx;
					line-height: 40upx;
					color: #fff;

					.list-time-in {
						width: 100%;
					}

					.rectified,
					.not-rectified {
						padding: 0 18upx;
						border-radius: 4upx;
					}

					.rectified {
						background-color: #4491fd;
					}

					.not-rectified {
						background-color: #f8695f;
					}
				}
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999
		}
	}
</style>
